import { defineComponent, ref } from "vue";
import PublicDialog from "@/components/PublicDialog/PublicDialog.vue";

export default defineComponent({
	props: {
		tableData: Object, // 确保类型匹配
	},
	setup(props, context) {
		let formRulers = ref({});
		let formData = ref({});
		props.tableData.form.formList.forEach((item) => {
			item.validate && (formRulers.value[item.key] = item.validate);
			item.key && (formData.value[item.key] = item.value || null);
			if (item.type == "select") {
				// console.log(444, item.key, item.value);
			}
		});
		let formRef = ref();
		const doSubmit = async (type) => {
			// 取消
			if (type === "cancel") {
				//重置表单验证
				formRef.value.resetFields();
				props.tableData.form.handelFormShow(false);
				return;
			}
			// 确认
			await formRef.value.validate((valid, fields) => {
				if (valid) {
					props.tableData.form.handelSubmit(formData.value);
				} else {
					console.log("表单校验失败!", fields);
				}
			});
		};
		return () => (
			<PublicDialog v-model={props.tableData.form.formShow} title={props.tableData.form.formName || ""} onConfirmDialog={doSubmit}>
				<el-form ref={formRef} rules={formRulers} model={formData.value} label-width="auto" label-position="top" class="csin-form">
					{props.tableData.form.formList.map((item) => {
						switch (item.type) {
							case "input":
								return (
									<el-form-item prop={item.key} label={item.label}>
										<el-input style={{ width: item.width || "100%" }} v-model={formData.value[item.key]} placeholder={item.placeholder} maxlength={item.maxLength} clearable={item.clearable || true} />
									</el-form-item>
								);
							case "multInput":
								return (
									<el-form-item prop={item.key} label={item.label}>
										<el-input type="textarea" autosize={{ minRows: 2 }} show-word-limit style={{ width: item.width || "100%" }} v-model={formData.value[item.key]} placeholder={item.placeholder} maxlength={item.maxLength} clearable={item.clearable || true} />
									</el-form-item>
								);
							case "select":
								return (
									<el-form-item prop={item.key} label={item.label}>
										<el-select style={{ width: item.width || "100%" }} v-model={formData.value[item.key]} placeholder={item.placeholder} clearable={item.clearable || true}>
											{item.optionList.map((items) => {
												return <el-option key={items.value} label={items.label} value={items.value} />;
											})}
										</el-select>
									</el-form-item>
								);
							case "multSelect":
								return (
									<el-form-item prop={item.key} label={item.label}>
										<el-select multiple collapse-tags style={{ width: item.width || "100%" }} v-model={formData.value[item.key]} placeholder={item.placeholder} clearable={item.clearable || true}>
											{item.optionList.map((items) => {
												return <el-option key={items.value} label={items.label} value={items.value} />;
											})}
										</el-select>
									</el-form-item>
								);
							case "datetime":
								return (
									<el-form-item prop={item.key} label={item.label}>
										<el-date-picker style={{ width: item.width || "100%" }} v-model={formData.value[item.key]} value-format={item.timeFormatter || "YYYY-MM-DD HH:mm:ss"} type="datetime" placeholder={item.placeholder} clearable={item.clearable || true} />
									</el-form-item>
								);
							case "timerange":
								return (
									<el-form-item prop={item.key} label={item.label}>
										<el-date-picker style={{ width: item.width || "100%" }} value-format={item.timeFormatter || "YYYY-MM-DD HH:mm:ss"} v-model={formData.value[item.key]} type="datetimerange" start-placeholder={item.startPlaceholder || "开始时间"} range-separator={item.separator || "-"} end-placeholder={item.endPlaceholder || "结束时间"} clearable={item.clearable || true} />
									</el-form-item>
								);
							case "cascader":
								return (
									<el-form-item prop={item.key} label={item.label}>
										<el-cascader style={{ width: item.width || "100%" }} v-model={formData.value[item.key]}  placeholder={item.placeholder} props={item.propset} options={item.optionList}  clearable={item.clearable || true}/>
									</el-form-item>
								);
							default:
								break;
						}
					})}
				</el-form>
			</PublicDialog>
		);
	},
});
